<template>
	<div class="list-banners">
		<p class="title">请选择要学习的科目内容</p>
		<p>以便系统匹配到专属习题</p>
		<p><img src="./image/资料库.png" alt="" /> 选择科目</p>

		<div class="item">
			<span
				v-for="item in arr"
				@click="clickHandle(item.id)"
				:class="currentId == item.id ? 'current' : ''"
				>{{ item.name }}</span
			>
			<span class="zhanwei"></span>
			<span class="zhanwei"></span>
		</div>

		<p><img src="./image/灯泡.png" alt="" /> 选择知识点</p>
		<div class="item select">
			<span
				v-for="item in arr1"
				@click="clickHandle1(item.id)"
				:class="currentId1 == item.id ? 'current' : ''"
				>{{ item.name }}</span
			>
			<span class="zhanwei"></span>
			<span class="zhanwei"></span>
		</div>

		<p>请放心选择，后面可修改</p>
		<Button class="btn" @click="GoLearn">进入学习</Button>
	</div>
</template>
<script setup>
import { Button } from "vant";
import { loadBaseAPI } from "../API/li";
import { ref } from "vue";
import { useRouter } from "vue-router";

let router = useRouter();

let arr = ref([]);
let arr1 = ref([]);
let currentId = ref(1);
let currentId1 = ref(1);
loadBaseAPI(0).then((res) => {
	arr.value = res.data;
});

//初始化
loadBaseAPI(1).then((res) => {
	arr1.value = res.data;
	console.log(arr1);
});

currentId.value = 1;
currentId1.value = 8;
//选择科目
let clickHandle = (id) => {
	loadBaseAPI(id).then((res) => {
		arr1.value = res.data;
	});
	currentId.value = id;
	console.log(id);
};

//选择知识点
let clickHandle1 = (id) => {
	currentId1.value = id;
};

//去学习
let GoLearn = () => {
	switch (currentId.value) {
		case 1:
			router.push({
				name: "Home-MiddleMath",
				query: {
					id: 1,
				},
			});
			break;
		case 2:
			router.push({
				name: "Home-Chinese",
				query: {
					id: 2,
				},
			});
			break;
		case 3:
			router.push({
				name: "Home-English",
				query: {
					id: 3,
				},
			});
			break;
		case 4:
			router.push({
				name: "Home-Physics",
				query: {
					id: 4,
				},
			});
			break;
		case 5:
			router.push({
				name: "Home-Chemistry",
				query: {
					id: 5,
				},
			});
			break;
		case 6:
			router.push({
				name: "Home-HighMath",
				query: {
					id: 6,
				},
			});
			break;
		case 7:
			router.push({
				name: "Home-Mathematics",
				query: {
					id: 7,
				},
			});
			break;
	}
};
</script>
<style scoped>
p img {
	width: 1rem;
}
p:nth-of-type(4) img {
	width: 0.9rem;
	margin-top: -1px;
}
p:nth-of-type(4) {
	display: flex;
	justify-content: center;
	gap: 4px;
}
p,
div,
span {
	text-align: center;
}
.list-banners {
	width: 100%;
	height: 100%;
	padding: 4vw;
	box-sizing: border-box;
}
.title {
	font-size: 1.2rem;
	margin-top: 5.3333vw;
	color: #6e6e6e;
}
p:nth-of-type(2),
p:nth-of-type(5) {
	font-size: 0.8rem;
	margin-top: 2.6667vw;
	color: #999999;
}
p:nth-of-type(3),
p:nth-of-type(4) {
	margin-top: 5.6667vw;
	color: #6e6e6e;
	font-size: 0.9rem;
}
.item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	height: 40vw;
	align-content: flex-start;
	gap: 2.3333vw;
	margin-top: 2.6667vw;
}
.item span {
	width: 26vw;
	height: 6.9333vw;
	background-color: #e6e6e6;
	border-radius: 2.3333vw;
	color: #333333;
	line-height: 6.9333vw;
	font-size: 0.85rem;
	margin-top: 2.6667vw;
}
/* .select {
  height: ;
} */
.btn {
	width: 55vw;
	height: 11vw;
	border-radius: 12vw;
	background-color: #007af4;
	margin-top: 2.3333vw;
	color: white;
}
.current {
	background-color: #007af4 !important;
	color: #ffffff !important;
}
.zhanwei {
	opacity: 0 !important;
}
</style>
